<template>
  <div class="home">
    <div class="head">
      <div class="container">
        <div class="db">
          <div class="logo" style="margin-right: 0.12rem;" @click="$router.go('-1')"><img src="../../assets/images/logo.png" alt=""></div>
          <div class="so flexs" style="position: relative;">
            <input
              autocomplete="on"
              cl
              type="text"
              name="search"
              :placeholder="$t('page.doc115')" v-model="movieName"
              @keyup.enter="seachEnter"
            >
            <div style="position: absolute;top: 0;right: 0;width: 0.64rem;height: 0.64rem;" @click="seachClick"></div>
          </div>
        </div>
      </div>
    </div>



    <div class="container">


      <div class="empty db rel" style="z-index: 3;" v-show="emptyShow" >
        <div class="flexs">
          <van-empty
              class="custom-image"
              :image="require('../../assets/images/none.png')"
              :description="$t('load.doc1') "
          />
        </div>
      </div>

      <div class="h100" v-if="!emptyShow">

      <van-pull-refresh v-model="refreshing" :success-text="$t('load.refreshed')"
                        @refresh="onRefresh(0)"
                        head-height="100"

      >


        <van-list
            v-if="vanListIF"
            v-model="loading"
            :finished="finished"
            :finished-text="$t('load.no_more')"
            :loading-text="$t('load.loading')"
            @load="onLoad"
            :immediate-check="check"
        >


        <ul class="list c">
          <li @click="checkLevel(item)" v-for="(item,k) in datalist" :key="k" :class="{on:item.watch}">
            <div class="pic"><img v-lazy="item.coverUrl" alt=""></div>
            <div class="n">{{ item.name }}</div>
            <div class="str">
              <span v-if="!item.watch">{{$t('page.doc3')}}</span>
              <span v-else>{{$t('page.doc4')}}</span>
            </div>
          </li>
        </ul>
        </van-list>
      </van-pull-refresh>
        </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title:this.$route.query.title,
      datalist:[],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow:false,
      datalistNum:0,
      check:true,
      movieName:'',
      vanListIF: false,
      levelData: [],
    };
  },

  mounted() {
    document.title = this.title
    this.getLevel()
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  methods: {
    checkLevel(item) {
      // if (this.userData.level > -1) {
      //   let levelInfo = {}
      //   for (let i = 0; i < this.levelData.length; i++) {
      //     if (this.levelData[i].level == this.userData.level) {
      //       levelInfo = this.levelData[i]
      //       break;
      //     }
      //   }
       // if (levelInfo.incomeDailyCount - levelInfo.incomeDailyUseCount > 0) {
          this.path_url('/home/view?id=' + item.movieId)
        // } else {
        //   this.$toast(this.$t('new.doc51'))
        // }
      // } else {
      //   this.$toast(this.$t('new.doc50'))
      // }
    },
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levelData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    seachEnter(e) {
      this.vanListIF = true
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        this.pageSize = 0
        this.totalPage = ""
        this.finished = false
        this.loading = true
        this.datalist = []
        this.emptyShow = false
        this.onLoad()
      }
    },
    seachClick(){
      this.vanListIF = true
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.pageSize = 0
      this.totalPage = ""
      this.finished = false
      this.loading = true
      this.datalist = []
      this.emptyShow = false
      this.onLoad()
    },

    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = []
          this.refreshing = false;
        }
        this.getlist();
      },0)
    },
    onRefresh() {
      this.finished = false
      this.loading = true

      this.pageSize = 0
      this.totalPage = ""

      this.onLoad();
    },


    getlist(){
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true

        return;
      }
      if(!this.movieName) return
      this.$post(this.URL.home.movie_search, {
        keyword:this.movieName,
        page:this.pageSize,
        pageSize:10
      }).then((res) => {
        if (res.code == 0) {
          setTimeout(() => {

            if(res.data.list.length < res.data.page.pageSize){
              this.finished = true;
            }

            if(res.data.list.length==0){
              this.emptyShow = true
            }


            let initData = res.data.list;
            this.datalist.push(...initData);
            this.loading = false;


          }, 100);



        } else {
          this.$toast(res.message);
        }
      });
    },


    path_url(url){
      this.$router.push({
        path:url,
        query:{
        }
      });
    },
  },
};
</script>



<style lang="less" scoped>
.home {
  height: 100vh;
}
.h100 {
  height: 100vh;
}
.head {
  padding: .2rem 0;
  .logo {
    img {
      height: .64rem;
    }
  }
  .so {
    height: .64rem;
    background: #2a292f;
    border-radius: .34rem;
    padding: 0 .24rem 0 .3rem;
    input {
      font-size: .28rem;
      height: .64rem;
      width: 100%;
      background: url("../../assets/images/ico_so2.png") no-repeat right center;
      background-size: auto .32rem;
      border:0;
    }
  }
}

.list {
  position: relative;
  z-index: 2;
  li {
    width: 2.2rem;
    margin-right: .1rem;
    float: left;
    margin-bottom: .3rem;
    &:nth-child(3n) {
      margin-right: 0;
    }
    img {
      width: 100%;
      height: 3rem;
      object-fit: cover;
    }
    .n {
      font-size: .28rem;
      margin: .12rem 0;
    }
    .str {
      font-size: .24rem;
      span {
        line-height: .4rem;
        background: linear-gradient(180deg,#f95f46, #df3785);
        border-radius: .18rem;
        display: block;
        text-align: center;
      }
    }
    &.on {
      .t {
        color: #979797;
      }
      .str {
        span {
          background: #232428;
          color: #979797;
        }
      }
    }
  }
}

</style>